<template>
	<div class="bg-white">

		<div class="shadow rounded overflow-hidden">
			<div class="bg-main p-2">
				<span>门店信息</span>
			</div>
			<div :style="'background-image:url('+astore.cover+');'" class="position-relative">
				<div style="background-color: rgba(255,255,255, 0.6);" class="w-100 h-100">
					<Row class="">
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="12">
						<div class="bg-danfen rounded p-2 d-flex justify-content-between align-items-center h-100">
							<div class="">状态</div>
							<div v-if="astore.stu == 'U'">待设置</div>
							<div v-if="astore.stu == 'C'">编辑中</div>
							<div v-if="astore.stu == 'R'">
								<span>已设置</span>
								<Button type="primary" @click="save('T')">已发门禁</Button>
								<!-- <button class="btn btn-primary" @click="save('J')">不同意</button> -->
							</div>
							<div v-if="astore.stu == 'T'">已通过</div>
							<div v-if="astore.stu == 'J'">已驳回</div>
						</div>
						</Col>

            <!-- 押金状态 -->
            <Col class="p-1" :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="12">
              <div class="bg-danfen rounded p-2 d-flex justify-content-between h-100">
                <div class="">押金状态</div>
                <div v-if="dz.yj == '0'">
                  <span>未交</span>
                  <Input v-model="dz.yj"/>
                  <Button type="primary" @click="crediting">确认缴纳</Button>
                </div>
                <div v-else>已缴纳押金：{{ dz.yj }}</div>
              </div>
            </Col>
											
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="12">
						<div class="bg-qingbai rounded p-2 d-flex justify-content-between h-100">
							<div class="">保洁</div>
							<div v-if="astore.bj == '1'">每天一次</div>
							<div v-if="astore.bj == '2'">每天两次</div>
							<div v-if="astore.bj == '3'">每天三次</div>
							<div v-if="astore.bj == '4'">每天四次</div>
							<div v-if="astore.bj == '5'">每天五次</div>
							<div v-if="astore.bj == 'k'">每课一次</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="6">
						<div class="bg-qingbai rounded  p-2 h-100">
							<div class="">门店</div>
							<div>{{astore.sname}}</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="6">
						<div class="bg-qingbai rounded  p-2 h-100">
							<div class="">密钥</div>
							<div>{{astore.akey}}</div>
						</div>
						</Col>
						
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="6">
						<div class="bg-qingbai rounded  p-2 h-100">
							<div class="">区域</div>
							<div>{{astore.pcode}}{{astore.scode}}{{astore.qcode}}</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="6">
						<div class="bg-qingbai rounded  p-2 h-100">
							<div class="">地址</div>
							<div>{{astore.address}}</div>
						</div>
						</Col>
						
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="12">
						<div class="bg-shuilan rounded p-2 h-100">
							<div class="">设施</div>
							<div class="d-flex">
								<div class="d-flex flex-column align-items-center p-2" v-if="astore.ly">
									<div class="iconfont icon-peitaosheshixiaotubiao_linyu text-xxl"></div>
									<div class="text-center text-xs">淋浴</div>
								</div>
								<div class="d-flex flex-column align-items-center p-2" v-if="astore.kt">
									<div class="iconfont icon-kongtiao text-xxl"></div>
									<div class="text-center text-xs">空调</div>
								</div>
								<div class="d-flex flex-column align-items-center p-2" v-if="astore.gys">
									<div class="iconfont icon-ziyuan text-xxl"></div>
									<div class="text-center text-xs">更衣室</div>
								</div>
								<div class="d-flex flex-column align-items-center p-2" v-if="astore.cs">
									<div class="iconfont icon-weishengjian text-xxl"></div>
									<div class="text-center text-xs">卫生间</div>
								</div>
								<div class="d-flex flex-column align-items-center p-2" v-if="astore.wifi">
									<div class="iconfont icon-wifi text-xxl"></div>
									<div class="text-center text-xs">WIFI</div>
								</div>
								<div class="d-flex flex-column align-items-center p-2" v-if="astore.yys">
									<div class="iconfont icon-yinyongshui text-xxl"></div>
									<div class="text-center text-xs">饮用水</div>
								</div>
							</div>
						</div>
						</Col>
						<Col v-if="dz" class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="6">
						<div class="bg-f-fuguang rounded  p-2 h-100">
							<div class="">店长</div>
							<div class="p-2 d-flex">
								<div style="width: 20%;" class="position-relative">
									<div class="padding-top-100">
									</div>
									<img class="w-100 h-100 position-absolute top0 rounded-circle" :src="dz.cover"/>
								</div>
								<div class="w-75">
									<div class="px-3">{{dz.dname}}</div>
									<div class="px-3">{{dz.tel ? dz.tel : "未设置电话"}}</div>
								</div>
								
							</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="6">
						<div class="bg-qingbai rounded p-2 h-100 overflow-hidden">
							<div class="">设备邮寄地址</div>
							<div>{{sbyjxx.address}} {{sbyjxx.person}} {{sbyjxx.tel}}</div>
						</div>
						</Col>
						
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="8" :xxl="8">
						<div class="bg-qingbai rounded p-2 h-100 overflow-hidden">
							<div class="">封面</div>
							<img class="w-100 h-100" :src="astore.cover" />
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="8" :xxl="8">
						<div class="bg-qingbai rounded p-2 h-100 overflow-hidden">
							<div class="">图片</div>
							<Carousel  loop>
								<CarouselItem v-for="(img, index) in astore.imgs" :key="index">
									<img class="w-100 h-100" :src="img" />
								</CarouselItem>
							</Carousel>
						</div>
						</Col>
						<!-- <Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="8" :xxl="8">
						<div class="bg-qingbai rounded p-2 h-100 overflow-hidden">
							<div class="">使用证明</div>
							<img class="w-100 h-100" :src="astore.yyzz" />
						</div>
						</Col> -->
						
						
					</Row>
				</div>
			</div>
		</div>

		<div class="shadow rounded overflow-hidden mt-3">
			<div class="bg-main p-2">
				<span>门禁信息</span>
			</div>
			<div>
				<Row class="">
					<Col v-for="(mj,index) in mjs" :key="index"
					class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
					<div class="shadow rounded p-2">
						<div class="d-flex justify-content-between">
							<span>类型</span>
							<span v-if="mj.flg">出门</span>
							<span v-else>进门</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>型号</span>
							<span>{{mj.modelNumber}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>UID</span>
							<span>{{mj.uId}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>UKEY</span>
							<span>{{mj.uKey}}</span>
						</div>
					</div>
					</Col>
				</Row>
			</div>
		</div>

		<div class="shadow rounded overflow-hidden mt-3">
			<div class="bg-main p-2">
				<span>房间信息</span>
			</div>
			<div>
				<Row class="">
					<Col v-for="(room,index) in rooms" :key="index"
					class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
					<div :style="'background-image:url('+room.cover+'); background-size: 100% 100%;'" 
						class="shadow rounded overflow-hidden">
						<div class="bg-black-50 text-fuguang">
							<div class=" p-2">
								<div>房间</div>
								<span>{{room.rname}}</span>
							</div>
							<div class="d-flex justify-content-between p-2">
								<div>面积</div>
								<span>{{room.mj}}㎡</span>
							</div>
							<div class="d-flex justify-content-between p-2">
								<div>容纳人数</div>
								<span>{{room.rnrs}}</span>
							</div>
							<div class="d-flex justify-content-between p-2">
								<div>瑜伽垫数</div>
								<span>{{room.yjds}}</span>
							</div>
						</div>	
					</div>
					</Col>
				</Row>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				astore: {},
				dz: {},
				mjs: [],
				rooms: [],
				sbyjxx: {
					ismd: false,
					address: "",
					person: "",
					tel: ""
				},
        yj: 0
			}
		},
		created: function() {
			this.astore.storeid = this.$route.query.id;
			this.loadData();
		},
		mounted: function() {},
		methods: {
			save: function(stu) {
        if (this.dz.yj <= 0) {
          this.message.error("请先交押金！");
          return;
        }
				return this.http.put({
					url: "/store/info",
					data: {
						storeid: this.astore.storeid,
						stu,
					}
				}).then(data => {
					console.log(data);
					this.message.info("执行成功");
					this.astore = data;
					if (this.astore.sbyjxx) {
						this.sbyjxx = JSON.parse(this.astore.sbyjxx);
						console.log(this.astore);
					}
					this.loadData();
				});
			},
      crediting: function () {
        if (this.dz.yj <= 0) {
          this.message.error("请输入押金金额");
          return;
        }
        return this.http.put({
          url: "/dz/info",
          data: {
            dzid: this.dz.dzid,
            yj: this.dz.yj
          }
        }).then(data => {
          console.log(data);
          this.message.info("缴纳成功");
          this.loadData();
        });
      },
			loadData: function() {
				return this.http.get({
					url: "/store/info",
					param: {
						storeid: this.astore.storeid
					}
				}).then(res => {
					this.astore = res.astore;
					if (this.astore.sbyjxx) {
						this.sbyjxx = JSON.parse(this.astore.sbyjxx);
						console.log(this.astore);
					}
					this.dz = res.adz;
					this.mjs = res.menjins;
					this.rooms = res.rooms;
				});
			},

		},
	}
</script>

<style>
</style>